<template>
  <div class="address-page">
    <Header />

    <div class="page-content">
      <!-- 面包屑导航 -->
      <div class="page-nav">
        <div class="breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/account' }">
              <i class="fas fa-chevron-left"></i> {{ $t('返回账户')}}
            </el-breadcrumb-item>
            <el-breadcrumb-item>{{ $t('地址管理') }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>

      <!-- 主要内容 -->
      <div class="main-card">
        <h1 class="page-title">{{ $t('地址管理') }}</h1>
        <el-empty v-if="!addressList.length" :description="$t('暂无地址')" />

        <!-- 地址列表 -->
        <div class="address-list">
          <div
            v-for="address in addressList"
            :key="address.id"
            class="address-item"
            :class="{ active: address.isDefault }"
          >
<!--            <div class="radio-wrapper">-->
<!--              <div class="custom-radio"></div>-->
<!--            </div>-->
            <div class="address-details">
              <div class="address-header">
                <p class="name">
                  {{ address.name }}
                  <span class="default-tag" v-if="address.isDefault">{{ $t('默认') }}</span>
                </p>
                <div class="address-actions">
                  <el-button
                    link
                    type="primary"
                    @click="handleEdit(address)"
                  >
                    {{ $t('编辑') }}
                  </el-button>
                  <el-button
                    link
                    type="danger"
                    @click="handleDelete(address)"
                  >
                    {{ $t('删除') }}
                  </el-button>
                  <el-button
                    v-if="!address.isDefault"
                    link
                    type="primary"
                    @click="handleSetDefault(address)"
                  >
                     {{ $t('设为默认') }}
                  </el-button>
                </div>
              </div>
              <p class="address">{{ address.consigneeAddressPath }}</p>
              <p class="address">{{ address.email }}</p>
              <p class="address">{{ address.mobile }}</p>
              <p class="phone">{{ address.detail }}</p>
            </div>
          </div>

          <!-- 添加新地址按钮 -->
          <div class="new-address-item" @click="showAddAddress">
            <i class="fas fa-plus"></i>
            <span>{{ $t('添加新地址') }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加/编辑地址弹窗 -->
    <AddAddress
      v-if="showDialog"
      :editingAddress="editingAddress"
      @close="handleDialogClose"
      @submit="handleSubmit"
    />

    <Footer />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {ElLoading, ElMessage, ElMessageBox} from 'element-plus'
import Footer from '@/components/Footer.vue'
import AddAddress from '@/views/products/checkout/AddAddress.vue'
import {onMounted} from "@vue/runtime-core";
import {
  ApiAddressAdd,
  ApiAddressDefaultSet,
  ApiAddressDelete,
  ApiAddressDetail,
  ApiAddressList,
  ApiAddressUpdate
} from "@/api/mine.js";
import {useI18n} from "vue-i18n";
const { t } = useI18n();

// 地址列表数据
const addressList = ref([])

const showDialog = ref(false)
const editingAddress = ref(null)

const getAddressList = () => {
  const loading = ElLoading.service()
  ApiAddressList().then(res => {
    addressList.value = res.data
  }).finally(() => {
    loading.close()
  })
}

// 显示添加地址弹窗
const showAddAddress = () => {
  editingAddress.value = null
  showDialog.value = true
}

// 处理编辑地址
const handleEdit = async (address) => {
  editingAddress.value = address
  showDialog.value = true
}

// 处理删除地址
const handleDelete = (address) => {
  ElMessageBox.confirm(
    t('确定要删除该地址吗？'),
    t('删除确认'),
    {
      confirmButtonText: t('确定'),
      cancelButtonText: t('取消'),
      type: 'warning'
    }
  ).then(async () => {
    await ApiAddressDelete([address.id])
    getAddressList()
    ElMessage({
      message: t('删除成功'),
      type: 'success',
      duration: 2000
    })
  })
}

// 处理设为默认地址
const handleSetDefault = async (item) => {
  try {
    await ApiAddressDefaultSet({ id: item.id, isDefault: !item.isDefault })
    getAddressList()
    ElMessage.success(t('设置成功'))
  } catch (error) {
    ElMessage.error(t('设置失败，请重试'))
  }
}

// 处理弹窗关闭
const handleDialogClose = () => {
  editingAddress.value = null
  showDialog.value = false
}

// 处理地址表单提交
const handleSubmit = async (formData) => {
  try {
    if(editingAddress.value?.id) {
      await ApiAddressUpdate(formData)
    } else {
      await ApiAddressAdd(formData)
    }
    ElMessage.success(editingAddress.value?.id ? t('更新成功') : t('添加成功'))
    handleDialogClose()
    getAddressList()
  } catch (error) {
    ElMessage.error(t('保存失败，请重试'))
  }
}

onMounted(() => {
  getAddressList()
})
</script>

<style lang="scss" scoped>
.address-page {
  background-color: #f8f8f8;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-content {
  padding: 32px 24px;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
}

.page-nav {
  margin-bottom: 24px;

  .breadcrumb {
    :deep(.el-breadcrumb__item) {
      .el-breadcrumb__inner {
        color: #565656;
        font-weight: normal;
        font-size: 14px;

        &:hover {
          color: #c45500;
        }

        i {
          margin-right: 4px;
          font-size: 12px;
        }
      }
    }
  }
}

.main-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  padding: 32px;
}

.page-title {
  font-size: 24px;
  color: #111;
  font-weight: 500;
  margin-bottom: 32px;
}

.address-list {
  .address-item {
    border: 1px solid #d5d9d9;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
    display: flex;
    gap: 16px;
    transition: all 0.2s;

    &:hover {
      border-color: #ff9900;
    }

    &.active {
      border: 2px solid #ff9900;
      background-color: #fff9e6;
    }

    .radio-wrapper {
      .custom-radio {
        width: 20px;
        height: 20px;
        border: 2px solid #888;
        border-radius: 50%;
        position: relative;
      }
    }

    .active .custom-radio::after {
      content: '';
      position: absolute;
      width: 12px;
      height: 12px;
      background-color: #ff9900;
      border-radius: 50%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .address-details {
      flex: 1;
      min-width: 0;

      .address-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;

        .name {
          font-size: 15px;
          color: #111;
          font-weight: 500;
          margin: 0;
          display: flex;
          align-items: center;
          gap: 8px;
        }

        .default-tag {
          background: #fff1e6;
          color: #d4380d;
          padding: 2px 8px;
          border-radius: 4px;
          font-size: 12px;
        }
      }

      .location {
        color: #666;
        font-size: 14px;
        margin: 4px 0;
      }

      .address {
        color: #111;
        font-size: 14px;
        margin: 4px 0;
      }

      .postcode {
        color: #666;
        font-size: 14px;
        margin: 4px 0;
      }

      .phone {
        color: #666;
        font-size: 14px;
        margin: 4px 0;
      }
    }

    .address-actions {
      display: flex;
      gap: 16px;
    }
  }

  .new-address-item {
    border: 2px dashed #ddd;
    padding: 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
    color: #666;

    &:hover {
      border-color: #ff9900;
      color: #ff9900;
    }

    i {
      font-size: 16px;
    }
  }
}

:deep(.el-dialog__body) {
  padding: 0;
}

@media (max-width: 768px) {
  .page-content {
    padding: 16px;
  }

  .main-card {
    padding: 24px 16px;
  }

  .page-title {
    font-size: 20px;
    margin-bottom: 24px;
  }

  .address-item {
    flex-direction: column;

    .address-actions {
      justify-content: flex-end;
      border-top: 1px solid #eee;
    }
  }
}
</style>
